<template>
    <div class="cart">
        <cart-nav-bar class="cart-nav">
            <div slot="center" class="center">购物车({{ cartLength }})</div>
        </cart-nav-bar>
        
        <cart-list></cart-list>
        
        <cart-bottom-bar></cart-bottom-bar>
    </div>
</template>


<script>
import CartNavBar from 'components/common/navbar/NavBar'


import CartList from './childCart/CartList.vue'
import CartBottomBar from './childCart/CartBottomBar.vue'

// 可将getters里的方法转成计算属性, 需导入
import {mapGetters} from 'vuex'


export default {
    components: {
        CartNavBar,
        CartList,
        CartBottomBar,
    },
    data() {
        return {

        }
    },
    methods: {

    },
    computed: {
        ...mapGetters(['cartLength'])
        // cartLength() {
        //     return this.$store.getters.cartLength
        // }
    }
}
</script>


<style scoped>
    .cart{
        height: 100vh;
    }
    .cart-nav{
        background: var(--color-tint);
        color: #fff;
        position: relative;
        z-index: 1;
        
    }

    
</style>